<template>
  <div>
    <DocHeader :title="data.title" :bottomBorder="false"></DocHeader>
    <div class="docMain">
      <div>尊敬的患者（或家属）：</div>
      <div class="textIndent2">
        根据您的疾病的治疗需要，您的主管医生已开出下列药物
        <div class="input"></div>
        进行治疗。根据静脉输液临床护理实践指南，该药物属于静脉刺激性药物，需选择中心静脉用药。如通过外周静脉用药可能会造成局部静脉的损伤，并增加药物外渗的风险，一旦发生可能造成局部皮肤的损害。严重者可造成皮肤永久溃烂甚至截肢。
      </div>
      <div class="textIndent2">
        以上情况告知患者或家属，如坚持选用外周静脉，请在下方签字，您在诊治过程中，医护人员会严格遵守操作规程，以最大限度降低上述风险。
      </div>
      <div class="flexBox hospitalSign">
        <div>医生/护士签名：</div>
        <div>时间：{{ currentTime }}</div>
      </div>
      <div class="agree">
        本人已充分了解上述风险，并愿意承担由此引起的后果。
      </div>
      <div class="flexBox patientSign">
        <div>患者/委托人签名：</div>
        <div>与患者关系</div>
      </div>
      <div class="flexBox timeInput">
        <div>
          <span style="padding-left: 4em"></span>年
          <span style="padding-left: 2em"></span>月
          <span style="padding-left: 2em"></span>日
          <span style="padding-left: 2em"></span>时
          <span style="padding-left: 2em"></span>分
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent } from 'vue'

import { formatTime } from '@/utils/format'

import DocHeader from './docHeader.vue'

export default defineComponent({
  components: {
    DocHeader
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    patCur: {
      type: Object,
      default: () => ({})
    }
  },
  setup() {
    const currentTime = computed(() =>
      formatTime(new Date(), 'yyyy-MM-dd HH:mm')
    )

    return {
      currentTime
    }
  }
})
</script>

<style lang="scss" scoped>
.docMain {
  line-height: 2em;
  margin-top: 10px;
}

.textIndent2 {
  text-indent: 2em;
}

.flexBox {
  display: flex;
}

.input {
  display: inline-block;
  width: 170px;
  height: 20px;
  border-bottom: 1px solid #000;
}

.hospitalSign {
  justify-content: space-between;
  margin-top: 127px;
}

.agree {
  margin-top: 127px;
}

.patientSign {
  margin-top: 35px;

  div:nth-child(1) {
    margin-right: 180px;
  }
}

.timeInput {
  justify-content: flex-end;
  margin-top: 100px;
}
</style>
